<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="/js/jquery.min.js"></script>
<!--<script>
    $(function () {
        alert("dsf");
        $("#jibei").change(function () {
            var q =true;
            alert("我进来临")
            var per = $(this).val();
            alert(per);
            if (per == "1"){}
            if (per == "2"){
                alert("asdf");
                $("#onePer").slideDown(250);
                q =false;
            }
            if (per == "3"){
                if (q == true) {
                    $("#onePer").slideDown(250);
                }
                $("#twoPer").slideDown(250);
            }
        })

    })
</script>-->
<body>
<form class="layui-form" lay-filter="per2Form" id="add_per2_form" action="" style="padding:15px 10px;" method="post" enctype="multipart/form-data">
   <!-- <input type="hidden" name="perId" class="perId">-->
    <div class="layui-form-item">
        <label class="layui-form-label">权限级别</label>
        <div class="layui-input-block" style="margin-left: 140px;margin-right: 40px;">
            <select name="jibei" id="jibei" lay-filter="yiji">
                <option value="-1">请选择添加级别</option>
                <option value="1">一级类别</option>
                <option value="2">二级类别</option>
                <option value="3">三级类别</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" id="onePer" style="display: none">
        <label class="layui-form-label">一级菜单</label>
        <div class="layui-input-block" style="margin-left: 140px;margin-right: 40px;">
            <select name="parentId" id="two" lay-filter="erji">
                <option value="-1">请选择权限级别</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" id="twoPer" style="display:none;">
        <label class="layui-form-label">二级菜单</label>
        <div class="layui-input-block"  style="margin-left: 140px;margin-right: 40px;">
            <select name="parentid" id="three">
                <option value="-1">请选择权限级别</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图标</label>
        <input type="hidden" name="perImage" id="perImage">
        <div class="layui-input-block" style="margin-left: 140px;margin-right: 40px;">
            <input type="text" id="iconPicker" lay-filter="iconPicker" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限名称</label>
        <div class="layui-input-block"  style="margin-left: 140px;margin-right: 40px;">
            <input type="text" name="perName" id="perName" required   lay-verify="required" placeholder="请输入权限名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"> 权限类别</label>
        <div class="layui-input-block"  style="margin-left: 140px;margin-right: 40px;">
            <input type="text" name="perType" id="perType" readonly="readonly" required  lay-verify="required" placeholder="请输入权限类别" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-block" style="margin-left: 140px;margin-right: 40px;">
            <input type="text" name="perUrl" required  lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标识</label>
        <div class="layui-input-block" style="margin-left: 140px;margin-right: 40px;">
            <input type="text" name="perCode" required  lay-verify="required" placeholder="请输入标识" autocomplete="off" class="layui-input">
        </div>
    </div>




  <!--  <div class="layui-form-item">
        <div class="layui-input-block"  style="margin-left: 140px;margin-right: 40px;">
            <div class="layui-upload">
                <input type="hidden" name="perImage" id="perImage">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>
    </div>-->

    <script>
        layui.form.render();
        layui.use(['form','upload','iconPicker'], function() {
            var form = layui.form;
             var upload = layui.upload;
            var iconPicker = layui.iconPicker;
            $("#perImage").val('layui-icon-rate');
            iconPicker.render({
                // 选择器，推荐使用input
                elem: '#iconPicker',
                // 数据类型：fontClass/unicode，推荐使用fontClass
                type: 'fontClass',
                // 是否开启搜索：true/false
                search: true,
                // 点击回调
                click: function (data) {
                    $("#perImage").val(data.icon);
                }
            });
          /*  iconPicker.checkIcon('iconPicker', 'layui-icon-rate');*/

            /* var uploadInst = upload.render({
                 elem: '#test1' //绑定元素
                 ,url: 'http://localhost:9999/Permission/PerImg'
                 ,accept: 'file' //允许上传的文件类型
                 ,size: 50 //最大允许上传的文件大小
           /!*     ,auto: false //选择文件后不自动上传
                 ,bindAction: '.layui-layer-btn0'*!/
                 ,before: function(obj){
                     //预读本地文件示例，不支持ie8
                     obj.preview(function(index, file, result){
                       $('#demo1').attr('src', result); //图片链接（base64）
                      $("#perImage").val( file.name);
                     });
                 }
                 ,done: function(res){
                     if(res.code > 0){
                         return layer.msg('上传失败');
                     }
                 }
             })*/
        /* $.get("http://localhost:9999/role/rolelist",function(data){
             $.each(data,function(){
                 var opt = $("<option></option>").appendTo("#roles_add");
                 opt.text(this.rolename).val(this.roleid);
             });
             layui.formSelects.render()
         });*/
            $.get("http://localhost:9999/Permission/Peryiji",function(data){
                $.each(data.data,function(){
                    var opt = $("<option></option>").appendTo("#two");
                    opt.text(this.perName).val(this.perId);
                    /*   $.each(this.children,function () {
                           var optt = $("<option></option>").appendTo("#three");
                           optt.text(this.perName).val(this.perId);
                       })*/
                });
                form.render();
            });

            form.on('select(yiji)', function(data){
            var q =true;
            if (data.value == 1){
                $("#two").empty();
                $("#three").empty();
                $("#perType").val("menu")
                $("#onePer").slideUp(250);
               setTimeout(function () {
                   $("#twoPer").slideUp(250);
               },240)

            }
            if (data.value == 2){
                $("#two").attr("name","parentId")
                $("#three").attr("name","parentid")
                $("#perType").val("menu")
                $("#twoPer").slideUp(250);
                setTimeout(function () {
                    $("#two").empty();
                    $.get("http://localhost:9999/Permission/Peryiji",function(data){
                        $.each(data.data,function(){
                            var opt = $("<option></option>").appendTo("#two");
                            opt.text(this.perName).val(this.perId);
                         /*   $.each(this.children,function () {
                                var optt = $("<option></option>").appendTo("#three");
                                optt.text(this.perName).val(this.perId);
                            })*/
                        });
                          form.render();
                    });
                    $("#onePer").slideDown(250);
                },240)
                q =false;
            }
            if (data.value == 3){
                $("#two").attr("name","parentid")
                $("#three").attr("name","parentId")
                $("#perType").val("permission");
                setTimeout(function () {
                    $.get("http://localhost:9999/Permission/Peryiji",function(data){
                        $("#two").empty();
                        $.each(data.data,function(){
                            var opt = $("<option></option>").appendTo("#two");
                            opt.text(this.perName).val(this.perId);
                        });
                        form.render();
                    });
                    $("#onePer").slideDown(250);
                },240)
                form.on('select(erji)', function(data){
                    $("#three").empty();
                    $("#twoPer").slideDown(250);
                    $.get("http://localhost:9999/Permission/Pererji",{perId:data.value},function(data){
                        $("#three").empty();
                        $.each(data.data,function(){
                            var opter = $("<option></option>").appendTo("#three");
                            opter.text(this.perName).val(this.perId);
                        });
                        form.render();
                    });
                })
                form.render();
                if (q == true) {
                    $("#onePer").slideDown(250);
                }

            }
        })
        })
    </script>
</form>
</body>
</html>